<template>
  <div class="task-arrangement">
    <div class="display-table">
      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="620"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="taskName" label="测试任务名称" width="130">
          </el-table-column>
          <el-table-column label="通信设备类型" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.deviceType == 1" class="span-purple">{{
                deviceTypeDict[scope.row.deviceType]
              }}</span>
              <span v-else-if="scope.row.deviceType == 2" class="span-blue">{{
                deviceTypeDict[scope.row.deviceType]
              }}</span>
              <span v-else class="span-yellow">{{
                deviceTypeDict[scope.row.deviceType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="触发规则" width="120">
            <template slot-scope="scope">{{
              triggerRuleDict[scope.row.triggerRule]
            }}</template>
          </el-table-column>
          <el-table-column label="执行策略" width="120">
            <template slot-scope="scope">{{
              endStrategyDict[scope.row.triggerRule]
            }}</template>
          </el-table-column>
          <el-table-column label="频率类型" width="130">
            <template slot-scope="scope">{{
              freqTypeDict[scope.row.freqType]
            }}</template>
          </el-table-column>
          <el-table-column label="测试类型" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.testType == 1" class="span-green">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else-if="scope.row.testType == 2" class="span-skyblue">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else class="span-lilac">{{
                testTypeDict[scope.row.testType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataSetName" label="数据文件名" width="130">
          </el-table-column>
          <el-table-column label="异常处理策略" width="130">
            <template slot-scope="scope">{{
              errorStrategyDict[scope.row.errorStrategy]
            }}</template>
          </el-table-column>
          <el-table-column prop="startTime" label="测试开始时间" width="180">
          </el-table-column>
          <el-table-column prop="endTime" label="测试结束时间" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="span-start" @click="startTask(scope.row)"></span>
              <span class="span-check" @click="checkTask(scope.row)"></span>
              <span class="span-edit" @click="editTask(scope.row)"></span>
              <span
                class="span-delete"
                @click="deleteOneTask(scope.row)"
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="50%"
      height="auto"
      top="5vh"
    >
      <TaskDefine
        :rowData="rowData"
        :checkFlag="checkFlag"
        :addFlag="addFlag"
        @closeDialog="closeDialog"
        @closeOverlay="closeOverlay"
        @sendData="defineTaskData"
      ></TaskDefine>
    </el-dialog>

    <el-dialog
      v-if="callSyncTaskdialogVisible"
      :visible.sync="callSyncTaskdialogVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="40%"
      height="auto"
      top="25vh"
    >
      <CallSyncTask
        type="任务管理"
        @closeDialog="closeDialog"
        @sendData="callSyncTask"
      ></CallSyncTask>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTaskInfo,
  deleteTask,
  startTask,
  callSyncTask,
  updateTask,
} from "@/api/TestManagement";
import TaskDefine from "@/views/taskArrange/components/TaskDefine.vue";
import CallSyncTask from "@/views/taskArrange/components/CallSyncTask.vue";
export default {
  name: "taskArrangement",
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        startTime: "", // 测试开始时间
        deviceType: "", //通信设备类型 1. c频段散射通信设备 2. ku频段散射通信设备 3. v/uhf电台设备
        testType: "", // 测试类型  1. 话音测试 2. 数据测试 3. 视频测试
      },
      tableData: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
      multipleSelection: [],
      /* 字典项 */
      deviceTypeDict: {
        1: "C",
        2: "Ku",
        3: "VHF/UHF",
      },
      endStrategyDict: {
        1: "截止时间优先",
        2: "测试完成优先",
      },
      triggerRuleDict: {
        1: "单次触发",
        2: "周期触发",
      },
      freqTypeDict: {
        1: "点频",
        2: "跳频",
        3: "扫频",
      },
      testTypeDict: {
        1: "话音测试",
        2: "数据测试",
        3: "视频测试",
      },
      errorStrategyDict: {
        0: "恢复",
        1: "终止",
      },
      // 编辑的当前数据
      rowData: {},
      // 当前页
      currentPage: 1,
      // 总条数
      total: 0,
      // 总页数
      totalPage: 0,
      // 跳转页
      jumpPage: 1,
      selectedIds: [], // 用来保存选中的 ID 数组
      // 任务定义弹窗
      dialogVisible: false,
      // 同步弹窗
      callSyncTaskdialogVisible: false,
      //编辑flag
      checkFlag: false,
      // 新增flag
      addFlag: false,
    };
  },
  props: {},
  components: { TaskDefine, CallSyncTask },
  methods: {
    // 多选框操作，
    handleSelectionChange(selection) {
      // 清空已选中的 ID 数组
      this.selectedIds = [];
      // 将当前选中的所有 ID 放入 selectedIds 数组中
      selection.forEach((item) => {
        this.selectedIds.push(item.id);
      });
    },
    // 搜索
    searchTask() {
      console.log("搜索");
      this.searchData.pageNum = this.currentPage;
      this.getTaskInfo(this.searchData);
    },
    //addTask
    addTask() {
      this.rowData = {};
      this.dialogVisible = true;
      this.addFlag = true;
    },
    // 开始
    startTask(row) {
      console.log("开始", row.id);
      startTask(row.id)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看
    checkTask(row) {
      this.rowData = {};
      this.rowData = row;
      this.dialogVisible = true;
      this.checkFlag = true;
    },
    // 关闭遮罩层的方法
    closeOverlay() {
      this.checkFlag = false; // 点击遮罩层时关闭遮罩层
    },
    // 编辑
    editTask(row) {
      this.rowData = {};
      this.rowData = row;
      this.dialogVisible = true;
      this.checkFlag = false;
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.callSyncTaskdialogVisible = false;
    },
    // 同步弹窗
    addCallSyncTask() {
      this.callSyncTaskdialogVisible = true;
    },
    // 删除
    deleteOneTask(row) {
      console.log("删除", row.id);
      this.deleteTask([row.id]);
    },
    // 删除多组
    deleteTaskArr() {
      console.log("删除", this.selectedIds);
      this.deleteTask(this.selectedIds);
    },
    // 任务定义，添加
    defineTaskData(taskDefineForm) {
      console.log("taskDefineForm", taskDefineForm);
      updateTask(taskDefineForm)
        .then((res) => {
          const msg = res.data.msg;
          if (msg == "成功") {
            this.$message.success("修改" + msg);
            this.closeDialog();
            this.getTaskInfo(this.searchData);
          } else {
            this.$message.error("修改" + msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 同步
    callSyncTask(form) {
      // 注意要String处理
      console.log("callSyncTaskcallSyncTaskcallSyncTask");
      callSyncTask(this.selectedIds, form.syncType, form.remoteAddress)
        .then((res) => {
          const code = res.code;
          if (code == 200) {
            this.$message.success("任务同步成功");
          } else {
            this.$message.error("任务同步失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除数据的接口
    deleteTask(deleteArr) {
      // 注意要String处理
      deleteTask(deleteArr)
        .then((res) => {
          const code = res.code;
          if (code == 200) {
            this.$message.success("删除测试任务信息成功");
          } else {
            this.$message.error("删除测试任务信息失败");
          }
          // 查询表格数据
          this.getTaskInfo(this.searchData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询数据，搜索，下一页
    getTaskInfo(params) {
      getTaskInfo(params)
        .then((res) => {
          const data = res.rows;
          const code = res.code;
          if (code == 200) {
            // this.$message.success("查询测试任务信息成功");
          } else {
            // this.$message.error("查询测试任务信息失败");
          }
          if (data != null) {
            this.tableData = data;
            this.total = res.total;
            this.totalPage = Math.ceil(res.total / 10);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //prevPage上一页
    prevPage() {
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage--;
      this.searchData.pageNum = this.currentPage;
      this.getTaskInfo(this.searchData);
    },
    //nextPage下一页
    nextPage() {
      this.currentPage++;
      this.searchData.pageNum = this.currentPage;
      this.getTaskInfo(this.searchData);
    },
    // 跳转页面
    jumpQueryPage() {
      this.searchData.pageNum = this.jumpPage;
      this.currentPage = this.jumpPage;
      this.getTaskInfo(this.searchData);
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getTaskInfo(this.searchData);
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.task-arrangement {
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  .action-bar {
    height: 5.25rem;
    line-height: 5.25rem;
    background: url("~@/assets/images/taskArrangement/border.png") no-repeat
      center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .bar-left {
      flex: 2;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .bar-import,
      .bar-export,
      .bar-synch,
      .bar-add,
      .bar-delete {
        cursor: pointer;
        margin: 0 0.625rem;
        :hover {
          color: #1adafb;
        }
      }
      span {
        padding: 0.3125rem;
      }
    }
    .bar-right {
      flex: 5;
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      .bar-test,
      .bar-startTime,
      .bar-testEndTime,
      .bar-testType {
        display: flex;
        flex-direction: row;
        flex: 2;
      }
      .bar-search {
        flex: 1;

        :hover {
          color: #1adafb;
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 0.625rem;
          width: 5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: url("~@/assets/images/taskArrangement/search-button.png")
            no-repeat center center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
  .display-table {
    flex: 1;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    .display-table-content {
      height: 90%;
    }
  }
  ::v-deep .el-input {
    width: 12.5rem;
  }

  ::v-deep .el-table--small th,
  .el-table--small td {
    padding: 0px 0px 0px 0px;
    height: 2.5rem;
  }
  .span-purple,
  .span-blue,
  .span-yellow,
  .span-skyblue,
  .span-green,
  .span-lilac {
    display: inline-block;
    width: 6rem;
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: 1.125rem;
  }
  .span-purple {
    background: url("~@/assets/images/taskArrangement/background-purple.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-blue {
    background: url("~@/assets/images/taskArrangement/background-blue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-yellow {
    background: url("~@/assets/images/taskArrangement/background-yellow.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-skyblue {
    background: url("~@/assets/images/taskArrangement/background-skyblue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-green {
    background: url("~@/assets/images/taskArrangement/background-green.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-lilac {
    background: url("~@/assets/images/taskArrangement/background-lilac.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-start,
  .span-check,
  .span-edit,
  .span-delete {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.625rem;
    cursor: pointer;
  }
  .span-start {
    background: url("~@/assets/images/taskArrangement/start.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-check {
    background: url("~@/assets/images/taskArrangement/check.png") no-repeat
      center center;
    background-size: 100% 100%;
    width: 1.5rem;
    height: 1.125rem;
  }
  .span-edit {
    background: url("~@/assets/images/taskArrangement/edit.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-delete {
    background: url("~@/assets/images/taskArrangement/delete.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
}
</style>
